<template>
  <el-container style="height: 100vh; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1','2', '3']" router>
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-message"></i>终端配置</template>
          <el-menu-item-group>
            <template slot="title"></template>
            <el-menu-item index="/map">终端地图</el-menu-item>
            <el-menu-item index="/home">摄像头配置</el-menu-item>
          </el-menu-item-group>
          <el-menu-item index="delcam">删除终端</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title"><i class="el-icon-menu"></i>数据管理</template>
          <el-menu-item index="list">摄像头数据</el-menu-item>
          <!-- <el-menu-item index="/statistic_chart">统计图表</el-menu-item> -->
        </el-submenu>
        <el-submenu index="3">
          <template slot="title"><i class="el-icon-setting"></i>视频查看</template>
          <el-menu-item-group>
            <template slot="title"></template>
            <el-menu-item index="liveview">实时浏览</el-menu-item>
            <el-menu-item index="review">录像视频</el-menu-item>
            <el-menu-item index="live">多路播放</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-dropdown>
          <i class="el-icon-setting" style="margin-right: 15px"></i>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="safe_quit">安全退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <span>{{person_name}}</span>
      </el-header>
      <el-main>
        <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">锁定</el-button>
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
          </span>
        </el-dialog>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple" @click="video">
              <video class="myvideo" id="video01" muted controls autoplay preload="auto"></video>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <video class="myvideo" id="video02" muted controls autoplay preload="auto"></video>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <video class="myvideo" id="video03" muted controls autoplay preload="auto"></video>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <video class="myvideo" id="video04" muted controls autoplay preload="auto"></video>
            </div>
          </el-col>
        </el-row>
      </el-main>

      <el-footer style="text-align: center; font-size: 10px">
        版权所有 © 雷佳千
      </el-footer>
    </el-container>
  </el-container>
</template>

<script>
  import {
    getPTZCmd
  } from '../../static/ptz.js'
  import {
    Webrtc
  } from '../../static/webrtc.js'

  export default {
    name: "liveview",
    editableTabsValue: "2",
    data() {
      return {
        webrtc: "",
        value: false,
        person_name: '',
        active: 0,
        terminal_id: '', //当前配置的id
        terminal_id_dev: [], //数据库中终端信息存储
        dialogVisible: false //弹窗
      }
    },
    methods: {
      video() {
        console.log(this.terminal_id_dev[0]);
        if (this.dialogVisible = true) {
          this.dialogVisible = false
        } else {
          this.dialogVisible = true
        }
      },

      getCmdUrl(name, cmd, that) {
        // console.log(that.person_name)
        // console.log(that.webrtc)
        return "http://219.138.126.226:18298/gb28181/control?id=" + that.webrtc.streams["测试"].devId + "&channel=" + that
          .webrtc
          .streams["测试"].channel + "&ptzcmd=" + cmd;
      },

      // get请求url
      get(url) {
        return new Promise((resolve, reject) => {
          let xhr = new XMLHttpRequest();
          xhr.open("GET", url);
          xhr.onload = () => {
            resolve(xhr.status);
          }
          xhr.onerror = () => {
            reject(xhr.status);
          }
          xhr.send();
        }).catch(e => {
          console.log(e);
        })
      },
      play() {
        console.log("-play-");
        var videolist = ["video01", "video02", "video03", "video04"];
        var j = 0;

        setInterval(() => {
          console.log("-setinterval-");
          if (j < this.terminal_id_dev.length) {
            j++
          } else {
            j = 0
          }
          for (var i = 0, n = j; i < videolist.length; i++, n++) {
            var videoip = "http://219.138.126.226:18298";
            var video = videolist[i];
            this.webrtc = new Webrtc(videoip);
            var devId = this.terminal_id_dev[n].devId;
            var channelNo = this.terminal_id_dev[n].channelNo;
            var channel = this.terminal_id_dev[n].channel;
            console.log(video, "-", devId, "-", channelNo, "-", channel);
            this.webrtc.addStream(video, "测试", "", devId, channel, channelNo);
            this.webrtc.invite("测试").then((d) => {
              if (d == 200 || d == 304) {
                this.webrtc.play("测试");
              }
            });
          };
        }, 24000)
      }
    },
    beforeCreate() {
      console.log("-beforecreate-");
      this.$http.get(this.$site + 'api/see_config')
        .then((response) => {
          response = response.body;
          for (var i = 0; i < response.length; i++) {
            var demo = {
              "label": "终端" + response[i].terminal,
              "devId": response[i].devId,
              "channelNo": response[i].channelNo,
              "channel": response[i].channel
            };
            this.terminal_id_dev.push(demo)
          };
          this.play()
        });
    },
    mounted() {
      console.log("liveview渲染完");
      var person_name = sessionStorage.getItem('person_name');
      if (person_name === null) {
        this.$router.push('/')
      } else {
        this.person_name = person_name
      };
      this.editableTabsValue = this.terminal_id_dev.length

    }
  }

</script>

<style scoped>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }

  video {
    width: 480px;
    height: 270px;
    background-color: #B3C0D1;
  }


  .grid-content {
    padding: 0 0px;
    /* width: 150px; */
    /* background-color: rgb(170, 31, 31); */
    margin: 0 10px;
  }

</style>
